<template>
  <div ref="musicBox" class="music__box">
    <div class="animation" :class="{ripple:play}">
      <img class="musicImg" alt=""
           src="http://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg?param=300x300">
      <audio ref="audio" @canplay="handleStartPlay"
             :src="$withBase('/music.mp3')" loop autoplay>
        您的浏览器不支持 audio 标签。
      </audio>
    </div>
    <div class="music__operation">
      <i class="fa fa-pause-circle" v-if="play" style="color:#ffffff;"
         @click="handlePause"></i>
      <i class="fa fa-play-circle" v-else style="color:#ffffff;"
         @click="handlePlay"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "Music",
  data() {
    return {
      play: false
    }
  },
  methods: {
    //音频准备就绪开始播放
    handleStartPlay() {
      this.$nextTick(function () {
        if (this.$refs.audio.paused) {
          this.play = false;
        } else {
          this.play = true;
        }
      })
    },
    //播放
    handlePlay() {
      this.play = true;
      this.$refs.audio.play();
    },
    //暂停
    handlePause() {
      this.play = false;
      this.$refs.audio.pause();
    },
  },
  mounted() {
  }
}
</script>

<style lang="stylus" scoped>

.animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid rgba(0, 0, 0, 0.1);
  animation: rotate 10s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.animation:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #b599b4;
  border-radius: 50%;
  opacity: 0;
  animation: ripple 2s linear 1s infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.animation:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #b599b4;
  border-radius: 50%;
  opacity: 0;
  animation: ripple 2s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

.ripple {
  animation-play-state: running;
  -webkit-animation-play-state: running;
}

.ripple:before {
  animation-play-state: running;
  -webkit-animation-play-state: running;
}

.ripple:after {
  animation-play-state: running;
  -webkit-animation-play-state: running;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  25% {
    transform: scale(1.25);
    opacity: 0.1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.3;
  }

  75% {
    transform: scale(1.75);
    opacity: 0.5;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.music__box {
  position: fixed;
  right: 50px;
  bottom: 120px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transition: all 1s;
}

.musicImg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.music__operation
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  border: 3px solid transparent;
  cursor: pointer;

  .fa
    font-size 35px


@media (max-width: $MQMobile)
  .music__box
    width: 65px;
    height: 65px;
    right 40px;
    bottom: 60px;

    .fa
      font-size 30px


</style>
